<template>
  <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      title="修改金额类型"
      :width="'400px'"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
  >
    <el-form :model="fm.ps" ref="formRef" :label-width="'100px'">
      <el-form-item
          label="利润方向"
          prop="profitDirection"
          :rules="[{ required: true, message: '利润方向', trigger: 'blur' }]">
        <el-select
            :disabled="isDisabled"
            v-model="fm.ps.profitDirection"
            style="width: 100%"
            clearable
            placeholder="请选择利润方向">
          <el-option
              v-for="item in profintOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
          label="金额类型"
          prop="typeName"
          :rules="[{ required: true, message: '请输入新增类型名称', trigger: 'blur' }]">
        <el-input v-model="fm.ps.typeName" placeholder="请输入新增类型名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{ fm.sb.text }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import { updateMoneyType} from "@/api/services/system.service";

export default {
  name: "UpdateType",
  directives: {elDragDialog},
  props: ["state", "data", 'isEdit'],
  components: {},
  data() {
    return {
      md: {state: this.state},
      fm: {
        fname: "addGroupFm",
        ps: {
          pid: '', // 父id
          profitDirection: '',
          typeName: "",
        },
        sb: {
          load: false,
          text: "添加",
        },
      },
      loading: false,
      profintOptions: [
        {value: 'INCOME', label: '收入类'},
        {value: 'OUTPAY', label: '支出类'},
        {value: 'TRANS', label: '互转类'},
      ],
      isDisabled:false
    };
  },
  created() {
    if (this.data) {
      console.log(this.data)
      const {id, profitDirection, typeName} = this.data
      this.fm.ps.pid = id
      this.fm.ps.profitDirection = profitDirection
      this.fm.ps.typeName = typeName;
    }
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },

    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.fm.sb.load = true; // 添加按钮禁用效果
          let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
          const {pid, profitDirection, typeName} = this.fm.ps
          let params = {updId: pid, typeName, profitDirection}
          updateMoneyType(params).then((res) => {
            this.fm.sb.load = false; // 取消按钮禁用效果
            this.U.qclose(loading); // 关闭遮罩
            if (!res || res.code !== 1) {
              this.U.qerror(res.msg);
            } else {
              this.U.qsuccess(res.msg);
              this.closeMd();
              this.$emit("reloadDg");
            }
          }).catch(() => {
            this.U.qclose(loading);
          })
        }
      });
    },
  },
};
</script>